<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>测试页面</title>
    <link rel="stylesheet" href="css/reset.css">
    <script src="./js/cdn.staticfile.org_jquery_2.0.0_jquery.min.js"></script>
    <script src="./js/unpkg.com_vue@3.3.4_dist_vue.global.js"></script>
    <script src="./js/cdn.jsdelivr.net_npm_axios@1.1.2_dist_axios.min.js"></script>
</head>
<body>
    
<div id="app">
    <div class="grid-container">
        <div class="user-list">
            <ul class="ul">
                <li class="showUser">用户1</li>
                <li>用户2</li>
            </ul>
        </div>
        <div class="content">
            <div style="margin: 5px;">
                <p>
                    <span style="color: rgb(27, 167, 2);font-size: 18px;font-weight: bolder;">管理员：</span>
                    <span style="color: rgb(168, 0, 76);">欢迎来到本聊天室</span></p>
                <p style="margin: 10px 0px 0px 10px;width: 100%;" v-for="(item,index) in msgList" :key="index">
                    <span style="font-size: 15px;font-weight: bolder;color: rgb(208, 11, 129);margin-right: 10px;">【{{ item[0] }}】:</span>
                    <span style="font-size: 15px;color: rgb(35, 46, 88);">{{ item[1] }}</span>
                </p>
            </div>
        </div>
        <div class="operate">
            <div style="width: 95%;height: 50%;margin-top: 5px;">
                <textarea v-model="inputMsg" @keyup="keyHandler" @keydown.alt="keyWarp"  class="inp" type="text" style="width: 100%;height: 100%;resize: none"></textarea>
                <button style="width: 100px;" class="btn">发送</button>
            </div>
        </div>
    </div>
</div>



<script type="module">
    const { createApp } = Vue
    axios.defaults.baseURL='http://192.168.0.16:2233/api/'
    createApp({
        data() {
            return {
                message: 'Hello Vue!',
                data:'',
                inputMsg:'',
                msgId:0,
                msgList:[],
                timer:null,
                userName:'用户'+ (new Date).getTime().toString().substring(6)
            }
        },
        mounted(){
            // axios.get('/sendmsg/').then(res=>this.data=res.data.data)

            // this.timer = setInterval(this.receiveMsg,2000)

            // clearInterval(this.timer)
            // setTimeout(()=>clearInterval(this.timer),10000)
        },
        methods:{
            keyHandler(key){
                if(key.key=='Enter'){
                    axios.get('/sendmsg/',{
                        params:{inputMsg:JSON.stringify([this.userName,this.inputMsg.trim()])}
                    })
                    console.log(this.inputMsg);
                    this.inputMsg=''
                }else{
                    // console.log(key.key);
                }
                
            },
            keyWarp(key){
                if(key.key=='Enter'){
                    this.inputMsg+='\n'
                }else{
                    // console.log(key.key);
                }
            },
            receiveMsg(){
                axios.get('/receiveMsg/',{
                    params:{msgId:this.msgId}
                }).then(res=>{
                    let newMsgList = res.data.data.newMsgList.map(item=>JSON.parse(item))
                    this.msgList = this.msgList.concat(newMsgList)
                    this.msgId=res.data.data.lastMsgId
                    // console.log(res.data.data.newMsgList);
                })
            }
        }


    }).mount('#app')
</script>
<style>
    body{
        background-color: #f6f6f6;
    }
    #app{
        
    }
    .grid-container{
        margin: auto auto;
        padding: 2px;
        display: grid;
        width: 1120px;
        height: 630px;
        border: 1px solid black;
        grid-template:2fr 1fr / 1fr 2fr;
        grid-gap:5px;
    }
    .user-list{
        border: 1px solid black;
        grid-area:1 / 1 / span 2 / span 1;
    }
    .content{
        border: 1px solid black;
    }
    .operate{
        border: 1px solid black;
        display: flex;
        flex-direction: column;
        align-items: center;
    }

    ul {
        list-style: none;
    }
    
    .showUser{
        color:red;
    }
    

</style>
</body>
</html>